<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>详情页</title>
		<link rel="stylesheet" href="/common/css/base.css">
        <link rel="stylesheet" href="/common/css/index_head.css">
		<link rel="stylesheet" href="/common/css/footer.css">
		<link rel="stylesheet" href="/search/css/list.css">
	</head>
	<body>
	<div class='header'>
		<div class="top">
			<div class="w clearfix">
				<div class='setNav fr'>
					<ul>
						<li id="userFather">
							<a th:if="${session.loginUser == null}" id="login_btn" href="http://localhost:11000/auth/login.html" >
								登录
							</a>
							<a th:if="${session.loginUser == null}" href="http://localhost:11000/auth/reg.html">
								注册
							</a>
							<a th:if="${session.loginUser != null}">
								欢迎, [[${session.loginUser.nickname}]]
							</a>
							<a th:if="${session.loginUser != null}" href="http://localhost:11000/auth/logout.html">
								立即退出
							</a>
						</li>
						<li class="line">
						</li>
						<li>
							<a href="http://localhost:11000/orderList.html">我的订单</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- //顶部按钮区域结束 -->
		<div class="w">
			<div class="top_search clearfix">
				<a href="http://localhost:11000">
					<div class="logo fl">
						<h1></h1>
					</div>
				</a>
				<div class="search fl">
					<form action="http://localhost:11000/list.html" method="get">
						<input name="keyword" type="text" id="ipt" placeholder="">
						<button>搜索</button>
						<ul id="list"></ul>
					</form>
				</div>
				<div class="shop_car fr">
					<a href="http://localhost:11000/cart/cart.html">购物车</a>
				</div>
			</div>
		</div>
		<!-- logo及 搜索框结束 -->
		<div class="w">
			<div class="tab clearfix">
				<div class="fl s_show">
					<a href="" class="logo_s"></a>
				</div>
				<ul class="fl clearfix" >
					<li class="tabItem">
						<a href="http://localhost:11000">首页</a>
					</li>
					<li class="tabItem" th:each="cat1:${category}">
						<a href="" th:text="${cat1.getName()}">居家生活</a>
						<div class="tabChild clearfix">
							<dl th:each="cat2:${cat1.getCat2()}">
								<dt th:text="${cat2.getName()}">夏季焕新</dt>
								<dd th:each="cat3:${cat2.getCat3()}">
									<a th:href="@{'/list.html?catalog3Id='+${cat3.getId()}}">
										<span th:text="${cat3.getName()}">夏凉尝鲜</span></a>
								</dd>
							</dl>
						</div>
					</li>
				</ul>
				<div class="fr s_show">
                <span class="log fl">
                        <ul class='setItem'>
                            <li th:if="${session.loginUser == null}">
                                <a href="http://localhost:11000/auth/login.html" >
                                    登录
                                </a>
                            </li>
                            <li th:if="${session.loginUser == null}">
                                <a href="http://localhost:11000/auth/reg.html">
                                    注册
                                </a>
                            </li>
                            <li th:if="${session.loginUser != null}">
                                <a href="http://localhost:11000/auth/logout.html">
                                    退出
                                </a>
                            </li>
                        </ul>
                    </span>
					<a href="http://localhost:11000/cart/cart.html">
                    <span class="show_car fl">
                    </span>
					</a>
				</div>
			</div>

		</div>
		<!-- tab区域结束 -->
	</div>
	<!-- 头部区域结束 -->
	<div style="width: 100%;background: #f5f5f5;padding-top: 10px;">
		<div style="width: 1090px;background: #fff;margin: auto">
			<!--过滤、排序-->
			<div class="JD_ipone">
				<div class="JD_ipone_bar">
					<div class="JD_ipone_one a">
						<span th:text="${param.keyword}"></span>
					</div>
					<i><img src="/search/image/right-@1x.png" alt=""></i>

					<div class="JD_ipone_one c">
						<!-- 遍历面包屑功能 -->
						<a th:href="${nav.link}" th:each="nav:${result.navs}">
							<span th:text="${nav.navName}"></span>：
							<span th:text="${nav.navValue}"></span> x
						</a>
					</div>
					<i><img src="/search/image/right-@1x.png" alt=""></i>
				</div>
			</div>
			<div class="JD_selector">
				<div class="JD_nav_logo" th:with="brandid=${param.brandId}" >
					<!--品牌-->
					<div class="JD_nav_wrap" th:if="${#strings.isEmpty(brandid)}">
						<div class="sl_key">
							<span><b>品牌：</b></span>
						</div>
						<div class="sl_value">
							<div class="sl_value_logo">
								<ul>
									<li th:each="brand:${result.brands}">
										<a th:href="${'javascript:searchProducts(&quot;brandId&quot;,'+brand.brandId+')'}">
											<img th:src="${brand.brandImg}" alt="">
											<div th:text="${brand.brandName}">
												华为(HUAWEI)
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<!--分类-->
					<div class="JD_pre">
						<div class="sl_key">
							<span><b>分类：</b></span>
						</div>
						<div class="sl_value">
							<ul>
								<li th:each="catalog : ${result.catalogs}">
									<a th:href="${'javascript:searchProducts(&quot;catalog3Id&quot;,'+catalog.catalogId+')'}"
									   th:text="${catalog.catalogName}">5.56英寸及以上
									</a>
								</li>
							</ul>
						</div>
					</div>
					<!--其它的所有需要展示的属性-->
					<div class="JD_pre" th:each="attr : ${result.attrs}" th:if="${!#lists.contains(result.attrIds, attr.attrId)}">
						<div class="sl_key">
							<span th:text="${attr.attrName}">屏幕尺寸：</span>
						</div>
						<div class="sl_value">
							<ul>
								<li th:each="attrValue : ${attr.attrValue}">
									<a th:href="${'javascript:searchProducts(&quot;attrs&quot;,&quot;'+attr.attrId+'_'+attrValue+'&quot;)'}"
									   th:text="${attrValue}">5.56英寸及以上
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="filter_top">
				<div class="filter_top_left" th:with="p = ${param.sort}, priceRange = ${param.skuPrice}">
					<a sort="hotScore" style="cursor: pointer"
					   th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p,'hotScore') && #strings.endsWith(p,'desc')) ? 'sort_a desc' : 'sort_a'}"
					   th:attr="style=${(#strings.isEmpty(p) || #strings.startsWith(p,'hotScore')) ?
                                   'color: #fff; border-color: #b4a078; background: #b4a078;':'color: #333; border-color: #ccc; background: #fff;' }">
						默认[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'hotScore') &&
						#strings.endsWith(p,'desc')) ?'↑':'↓' }]]</a>
					<a sort="skuPrice" style="cursor: pointer"
					   th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice') && #strings.endsWith(p,'desc')) ? 'sort_a desc' : 'sort_a'}"
					   th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice')) ?
                                   'color: #fff; border-color: #b4a078; background: #b4a078;':'color: #333; border-color: #ccc; background: #fff;' }">
						价格[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice') &&
						#strings.endsWith(p,'desc'))?'↑':'↓' }]]</a>
					<input id="skuPriceFrom" type="number" placeholder="￥"
						   th:value="${#strings.isEmpty(priceRange)?'':#strings.substringBefore(priceRange,'_')}"
						   style="width: 100px;padding: 3px ; margin-left: 30px; border: 1px solid #b4a078">
					-
					<input id="skuPriceTo" type="number" placeholder="￥"
						   th:value="${#strings.isEmpty(priceRange)?'':#strings.substringAfter(priceRange,'_')}"
						   style="width: 100px;padding: 3px ;border: 1px solid #b4a078;">
					<button id="skuPriceSearchBtn">确定</button>
				</div>
			</div>

			<!-- 商品列表页 -->
			<div class="goods-list">
				<div class="goods-item" th:each="product : ${result.getProduct()}">
					<div class="wrapper">
						<a th:href="|http://localhost:11000/${product.skuId}.html|" >
							<img th:src="${product.skuImg}" alt="">
						</a>
						<div class="price" th:text="'￥' + ${product.skuPrice}">204.00</div>
						<a class="title" th:href="|http://localhost:11000/${product.skuId}.html|"  th:utext="${product.skuTitle}">小胖墩 单手可拎20寸纯PC拉链拉杆箱</a>
					</div>
				</div>
			</div>
			<div class="page">
				<a class="page_a" th:attr="pn=${result.pageNum - 1}"
				   th:if="${result.pageNum>1}">
					< 上一页
				</a>
				<a class="page_num page_a"
				   th:attr="pn=${navs},style=${navs == result.pageNum?'border: 0;color:#ee2222;background: #fff':''}"
				   th:each="navs : ${result.pageNavs}">[[${navs}]]</a>
				<a class="page_a" th:attr="pn=${result.pageNum + 1}"
				   th:if="${result.pageNum<result.totalPages}" >
					下一页 >
				</a>
				<span class="page_span2">
					<em>共<b>[[${result.totalPages}]]</b>页&nbsp;&nbsp;</em>
				</span>
			</div>
		</div>

	</div>


    <script src="/common/js/jquery.js"></script>
	<script src="/common/js/utils.js"></script>
	<script>
		function searchProducts(name, value) {
			//原來的页面
			location.href = replaceParamVal(location.href, name, value, true)
		}

		function replaceParamVal(url, paramName, replaceVal, forceAdd) {
			var oUrl = url.toString();
			//1、如果没有就添加，有就替换
			if (oUrl.indexOf(paramName) != -1) {
				if (forceAdd) {
					var nUrl = "";
					if (oUrl.indexOf("?") != -1) {
						nUrl = oUrl + "&" + paramName + '=' + replaceVal;
					} else {
						nUrl = oUrl + "?" + paramName + '=' + replaceVal;
					}
					return nUrl;
				} else {
					var re = eval('/(' + paramName + '=)([^&]*)/gi');
					var nUrl = oUrl.replace(re, paramName + '=' + replaceVal)
					return nUrl;
				}
			} else {
				var nUrl = "";
				if (oUrl.indexOf("?") != -1) {
					nUrl = oUrl + "&" + paramName + '=' + replaceVal;
				} else {
					nUrl = oUrl + "?" + paramName + '=' + replaceVal;
				}
				return nUrl;
			}
		};

		function changeStyle(ele) {
			// location.href = replaceParamVal(href, "pageNum", pn,flase);
			// color: #333; border-color: #ccc; background: #fff
			// color: #fff; border-color: #e4393c; background: #e4393c
			$(".sort_a").css({"color": "#333", "border-color": "#ccc", "background": "#fff"});
			$(".sort_a").each(function () {
				let text = $(this).text().replace("↓", "").replace("↑", "");
				$(this).text(text);
			})

			$(ele).css({"color": "#FFF", "border-color": "#b4a078", "background": "#b4a078"});
			$(ele).toggleClass("desc");

			if ($(ele).hasClass("desc")) {
				let text = $(ele).text().replace("↓", "").replace("↑", "");
				text = text + "↓";
				$(ele).text(text);
			} else {
				let text = $(ele).text().replace("↓", "").replace("↑", "");
				text = text + "↑";
				$(ele).text(text);
			}
		};
		$(".page_a").click(function () {
			var pn = $(this).attr("pn");
			var href = location.href;
			if (href.indexOf("pageNum") != -1) {
				//替换pageNum
				location.href = replaceParamVal(href, "pageNum", pn);
			} else {
				location.href = location.href + "&pageNum=" + pn;
			}
			return false;
		})

		$(".sort_a").click(function () {
			changeStyle(this);
			let sort = $(this).attr("sort");
			sort = $(this).hasClass("desc") ? sort + "_desc" : sort + "_asc";
			location.href = replaceParamVal(location.href, "sort", sort, false);

			return false;
		});
	</script>

</body>

</html>
